<template>
        <a href="/ds1"><h1>ds1 seriesLayoutBy</h1></a>
        <a href="/ds2"><h1>ds1 encode修改轴</h1></a>
        <a href="/ds3"><h1>ds1 encode</h1></a>
    <div id="main"></div>
</template>
<script>
import *  as  echarts from 'echarts'


export default {
    name: 'dataset',
    mounted() {
        let myecharts = document.getElementById('main')
        let myChart = echarts.init(document.getElementById('main'),null,{
            width: 600,
            height: 400
        })
        // 定义option
        // let option = {
        //     xAxis: {
        //         type: 'category',
        //         data: ['抹茶拿铁', '奶茶', '芝士可可', '核桃布朗尼']
        //     },
        //     tooltip: {},
        //     yAxis: {},
        //     // 老式写法
        //     series: [  
        //         {
        //             type: 'bar',
        //             name: '2015',
        //             data: [89.3, 92.1, 94.4, 85.4]
        //         },
        //         {
        //             type: 'bar',
        //             name: '2016',
        //             data: [95.8, 89.4, 91.2, 76.9]
        //         },
        //         {
        //             type: 'bar',
        //             name: '2017',
        //             data: [97.7, 83.1, 92.5, 78.1]
        //         }
        //     ]
        // };

        // 定义option
        let option = {
            xAxis: {
                type: 'category',
                // data: ['抹茶拿铁', '奶茶', '芝士可可', '核桃布朗尼']
            },
            tooltip: {},
            yAxis: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                // 提供一份数据。
                source: [                  
                    ['抹茶拿铁', 43.3, 85.8, 93.7],
                    ['奶茶', 83.1, 73.4, 55.1],
                    ['芝士可可', 86.4, 65.2, 82.5],
                    ['核桃布朗尼', 72.4, 53.9, 39.1]
                ]
            },
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        myChart.setOption(option)   
    }
}
</script>
<style scoped>

</style>